<template>
    <!-- select 配置 -->
    <div class="prop-select">
        <el-form size="mini" label-suffix="：" label-width="80px">
            <el-form-item label="id">{{ data.id }} <i class="el-icon-refresh" @click.stop="refresh()"></i></el-form-item>
            <el-form-item label="提取数据" v-if="previewOption.mode == 'edit'">
                <el-input class="input-tooltip" v-model.trim="data.options.dataReturnField" placeholder="注意！数据绑定提取字段"></el-input>
                <el-tooltip effect="dark" content="填写字段：保存时报表会自动提取录入数据，返回对应的key值。" placement="top">
                    <i class="question el-icon-question"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="多选">
                <el-switch v-model="data.options.multiple" active-color="#1890ff" inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="展示Tag">
                <el-switch v-model="data.options.collapseTags" :disabled="!data.options.multiple" active-color="#1890ff" inactive-color="#ccc"></el-switch>
                <el-tooltip effect="dark" content="多选时是否将选中值按文字的形式展示" placement="top">
                    <i class="question el-icon-question"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="限制数量">
                <el-input-number v-model="data.options.multipleLimit" :disabled="!data.options.multiple" :controls="false"></el-input-number>
                <el-tooltip effect="dark" content="多选时用户最多可以选择的项目数，为 0 则不限制" placement="top">
                    <i class="question el-icon-question"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="大小">
                <el-radio-group v-model="data.options.size" size="mini">
                    <el-radio-button label="medium">大</el-radio-button>
                    <el-radio-button label="small">中</el-radio-button>
                    <el-radio-button label="mini">小</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="清空功能">
                <el-switch v-model="data.options.clearable" active-color="#1890ff" inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="可搜索">
                <el-switch v-model="data.options.filterable" active-color="#1890ff" inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="占位符">
                <el-input v-model.trim="data.options.placeholder" placeholder="设置placeholder属性"></el-input>
            </el-form-item>
            <el-form-item label="绑定数据">
                <el-select v-model="data.options.api"
                    size="mini"
                    placeholder='选择API配置的数据地址'
                    clearable
                    @change="handleApi">
                    <el-option v-for="(item, index) in Api.options" :key="index" :label="item.api" :value="item.api"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="lable/value">
                <el-input v-model.trim="data.options.label" placeholder="数据接口的Label"></el-input>
                <el-input v-model.trim="data.options.value" placeholder="数据接口的Value"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getUUID } from "@/utils/index";
export default {
    name: "PropSelect",
    props: {
        data: {
            type: Object
        },
        Api: {
            type: Object
        },
        previewOption: {
            type: Object
        }
    },
    methods: {
        refresh() { // 重制ID
            this.data.id = getUUID();
        },
        handleApi() {}
    }
}
</script>
